<html>
<head>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
	

	<script src="plugin/jquery-ui/js/jquery-1.5.1.min.js" type="text/javascript" ></script>
	<script src="plugin/jquery.tmpl/jquery.tmpl.min.js" type="text/javascript" ></script>
	<script src="plugin/iscroll/iscroll-min.js" type="text/javascript" ></script>
	<script src="js/Vector2.js" type="text/javascript" ></script>
	<script src="js/Rectangle.js" type="text/javascript" ></script>
	<script src="js/TouchController.js" type="text/javascript" ></script>
	<script src="js/com.unknown.Constants.js" type="text/javascript" ></script>
</head>
<body >
<style>
#player {
	width : 100px;
	height : 100px;
	background-image: url('images/person/player_actions.png');
	background-repeat: no-repeat;
	background-position: -1600 0;
		
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
.l4{
	z-index: 25;
}
#player-window > div {
	position: absolute;
	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	
	border-width: 1px;
	border-color: #000;
	border-style: solid;
}
#player-window > div > div {
	width : 100px;
	height: 100px;
	
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#scrollable {
	width : 1500px;
	height : 800px;
}
#container {
	width : 443px;
	height: 260px;
}
#mask{
	top : 0px;
	left: 0px;
	position: absolute;
	z-index: 1100;
}
.btnleft, .btnright, .btnup, .btndown {
	width: 30px;
	height: 30px;
	position: absolute;
	background-color: black;
	z-index: 990;
}

.btnleft {
	top: 250px;
	left: 20px;
}
.btnright {
	top: 250px;
	left: 80px;
}
.btnup {
	top: 220px;
	left: 50px;
}
.btndown {
	top: 280px;
	left: 50px;
}

</style>
	<div>
		<input type="text" id="path" value="images/tiles/" style="width:300px;"><br/>
		<input type="file" id="f1" value="hex_grass_n.png">
	</div>
	<canvas id="mask">
	</canvas>	
	<div id="container">
		<div id="scrollable">
			<div id="alt-view" style="position:absolute; height:100px;">
			</div>
		</div>
		<div id="objects" style="position:absolute; height:100px; z-index: 50">
		</div>
		</div>
	</div>
	<div id="image-bucket" style="display: none;">
		<img id="p1" src="images/person/player_actions.png">
	</div>
	<script type="text/x-jquery-tmpl" id="hex">
		<img src="{{= src }}" style="position: absolute; top:{{= top }}; left:{{= left }};" >
	</script>
	<script type="text/javascript">
		var _iscroll;
		var SPACING_X = 140;
		var SPACING_Y = 30;
		
		_iscroll = new iScroll('container', {
			hScroll      :true
			, vScroll    :true
			, hScrollbar : true
			, vScrollbar : true
			, hideScrollbar : false
			, zoom : false
			, zoomMin : 0.20
		});
			
		var imageSrc = 'hex_grass_n.png';
		
		var objects = [];		
		var tiles = [];
		
		UserInputController = function(){
			this.player = $('#player-container');
			this.speed = 10;
			
			this.move = function(field, amount){
				if( field == 'left')
					playerX += amount;
				if( field == 'top')
					playerY += amount;
			}
			this.moveElement = function(element, field, amount){
				var pos = element.position();
				if( field == 'top' ){
					pos.top += amount;
					element.css('top', pos.top + 'px');
				}
				if( field == 'left' ){
					pos.left += amount;
					element.css('left', pos.left + 'px');
				}
			}
						
			this.moveLeft = function(){
				this.move('left', -this.speed);
			}
			this.moveRight = function(){
				this.move('left', this.speed);
			}
			this.moveUp = function(){
				this.move('top', -this.speed);
			}
			this.moveDown = function(){
				this.move('top', this.speed);
			}
		};
		
		var inputController = new UserInputController();
		
		getImage = function(){
			var f1 = imageSrc
			var path = $('#path').val()
			f1 = f1.substring( f1.lastIndexOf('\\') )
			f1 = f1.substring( 0, f1.length - 5)
			var i = Math.floor(Math.random()*6)
			var ext;
			if( i == 0 ){ ext = 'n' }
			if( i == 1 ){ ext = 's' }
			if( i == 2 ){ ext = 'ne' }
			if( i == 3 ){ ext = 'nw' }
			if( i == 4 ){ ext = 'se' }
			if( i == 5 ){ ext = 'sw' }
			
			return path+f1 + ext + '.png'
		};
	
		placeImage = function(row, col, src, container){
			var tile = {
				top  : row*SPACING_Y,
				left : col*SPACING_X - ((row%2)*(SPACING_X/2)),
				src  : src
			};
			$('#hex').tmpl( tile ).appendTo(container);
		};
		
		$(function(){
			var row = 0;
			var col = 0;
			for(row=0;row <40;row++){
				for(col=0; col < 20; col++){
					tiles.push({
						top  : row*SPACING_Y,
						left : col*SPACING_X - ((row%2)*(SPACING_X/2)),
						src  : getImage()
					});
					
					//placeImage(row, col, getImage(), '#alt-view');
				}
			}
			imageSrc = '../objects/tree_n.png';
			var path = $('#path').val()
			for(col=0; col < 20; col+=2){
				objects.push({
					top : -5 * SPACING_Y,
					left : col * SPACING_X - ((-5%2)*(SPACING_X/2)),
					src : getImage(),
					width : 100,
					height : 100
				});
				//placeImage(-5, col, getImage(), '#objects')
			}
			
			for(col=0; col < 20; col+=2){
				objects.push({
					top : 0 * SPACING_Y,
					left : col * SPACING_X - ((0%2)*(SPACING_X/2)),
					src : getImage(),
					width : 100,
					height : 100
				});
				//placeImage(0, col, getImage(), '#objects')
			}
			
			for(col=0; col < 20; col+=2){
				objects.push({
					top : 16 * SPACING_Y,
					left : col * SPACING_X - ((16%2)*(SPACING_X/2)),
					src : getImage(),
					width : 100,
					height : 100
				});
				//placeImage(16, col, getImage(), '#objects')
			}
			$('#objects > img').each(function(){
//				var intersectable = new Intersectable( $(this) );
//				objects.push( intersectable );
				
//				console.log("Tree at " + from + " to " + to )
			});
		});
				
		$('body').keydown(function(event){
			var speed = 15;
			
			if(event.keyCode == '38' || event.keyCode == '104' || event.keyCode == '87'){//UP
				tc.vector.y = -speed;
			}else if( event.keyCode == '40' || event.keyCode == '98' || event.keyCode == '83'){//Down
				tc.vector.y = speed;
			}else if( event.keyCode == '37' || event.keyCode == '100' || event.keyCode == '65'){//Left
				tc.vector.x = -speed;
			}else if( event.keyCode == '39' || event.keyCode == '102' || event.keyCode == '68'){//Right
				tc.vector.x = speed;
			}
			//Cancel the action to ensure we don't scroll
			return false;
		});
		$('body').keyup(function(event){
			if(event.keyCode == '38' || event.keyCode == '104' || event.keyCode == '87'){//UP
				tc.vector.y = 0;
			}else if( event.keyCode == '40' || event.keyCode == '98' || event.keyCode == '83'){//Down
				tc.vector.y = 0;
			}else if( event.keyCode == '37' || event.keyCode == '100' || event.keyCode == '65'){//Left
				tc.vector.x = 0;
			}else if( event.keyCode == '39' || event.keyCode == '102' || event.keyCode == '68'){//Right
				tc.vector.x = 0;
			}
		});
					
		$("#f1").change(function(){
			imageSrc = $('#f1').val();
			
			$('#view > img, img.a1').each(function(){ 
				var f1 = $('#f1').val()
				var path = $('#path').val()
				f1 = f1.substring( f1.lastIndexOf('\\') )
				$(this).attr('src', path+f1) 
			})
			$('#alt-view > img').each(function(){ 
				
				$(this).attr('src', getImage()); 
			})
		})
				
		TouchListener = function(){
		};
		TouchListener.prototype = {
			listeners : [],
			
			addListener : function(l){
				this.listeners.push( l );
			},
			removeListener : function(l){
				this.listeners.remove( l );
			},
			notifyListeners : function(method, e){
				try{
				for(index in this.listeners){
					var listener = this.listeners[index];
					listener[method](e);
				}
				}catch(ex){
					alert(ex);
				}
			}
		};
		
		var tl = new TouchListener();
		if( com.unknown.Constants.TOUCHABLE ){
			mask.addEventListener( 'touchstart', function(e){ tl.notifyListeners("onTouchStart", e); }, false );
			mask.addEventListener( 'touchmove', function(e){ tl.notifyListeners("onTouchMove", e); }, false );
			mask.addEventListener( 'touchend', function(e){ tl.notifyListeners("onTouchEnd", e); }, false );
		}
		var tc = new TouchController(new Rectangle(0,0, 150, 300));
		tl.addListener( tc );
		
		var canvas = mask;
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var c = mask.getContext('2d');
		
		window.scrollTo(0,0);
		
		var frame = 0;
		var imageIndex = 14;
		var imageSeq = 0;
		var playerX = 0;
		var playerY = 0;
		
		var backgroundX = 0;
		var backgroundY = 0;
		
		var scrollX = 0;
		var scrollY = 0;
		
		var STILL = 0;
		var LEFT  = 1;
		var RIGHT = 2;
		var UP    = 4;
		var DOWN  = 8;
				
		function determineDirection(){
			var dir = STILL;
			if( tc.vector.x > 5 ) dir = dir | RIGHT; 
			if( tc.vector.x < -5 ) dir = dir | LEFT;
			if( tc.vector.y > 0 ) dir = dir | DOWN;
			if( tc.vector.y < 0 ) dir = dir | UP;
			return dir;
		}		
		
		var loadedimages = [];
		
		function buildTiles(){
			for( index in tiles ){
				var tile = tiles[index];
				var img = null;
				if( !loadedimages[tile.src] ){
					img = document.createElement('img');
					$(img).attr('src', tile.src);
					$('#image-bucket').append(img);
					loadedimages[tile.src] = img;
				}
				img = loadedimages[tile.src];
				
				var tileX = tile.left - backgroundX;
				var tileY = tile.top - backgroundY;
				
				if( tileX < canvas.width - (SPACING_X/2) 
					&& tileY < canvas.height - 30
					&& tileX > 0
					&& tileY > 0)
					c.drawImage( img, tile.left - backgroundX, tile.top - backgroundY );
			}
		}
		
		function buildObjects(loc, modifier){
			var drawCount = 0;
			for( index in objects ){
				var tile = objects[index];
				var img = null;
				if( !loadedimages[tile.src] ){
					img = document.createElement('img');
					$(img).attr('src', tile.src);
					$('#image-bucket').append(img);
					loadedimages[tile.src] = img;
				}
				img = loadedimages[tile.src];
				
				var tileX = tile.left - backgroundX;
				var tileY = tile.top - backgroundY;
				
				if( tileY + tile.height * modifier <= loc * modifier ){
					continue;
				}
				if( tileX < canvas.width - (SPACING_X/2) 
					&& tileY < canvas.height - 30 
					&& tileX + tile.width > 0
					&& tileY + tile.height > 0 ){
					c.drawImage( img, tile.left - backgroundX, tile.top - backgroundY );
					drawCount++;
				}
			}
			return drawCount;
		}		
		
		function mainLoop(){
			c.clearRect(0,0,canvas.width, canvas.height);
			
			buildTiles();
						
			frame++;
			if( frame > 30 ){
				frame = 0;
			}			
			if( frame % 2 == 0 ){
				imageIndex--;
			}
			if( imageIndex < 0 ){
				imageIndex = 14;
			}
			if( com.unknown.Constants.TOUCHABLE )			
				tc.draw( c );
			
			var moving = tc.vector.x != 0 || tc.vector.y != 0;
			var dir = determineDirection();
			var previousSeq = imageSeq;
			if( !dir ){
				//DO Nothing
			}
			else if( (dir ^ (LEFT | UP)) == 0 )  
				imageSeq = 1;
			else if( (dir ^ (LEFT | DOWN)) == 0 || (dir ^ (LEFT)) == 0 ) 
				imageSeq = 2;
			else if( (dir ^ (RIGHT | UP)) == 0 )  
				imageSeq = 5;
			else if( (dir ^ (RIGHT | DOWN)) == 0 || (dir ^ (RIGHT)) == 0 ) 
				imageSeq = 3;
			else if( (dir ^ (DOWN)) == 0) 
				imageSeq = 0;
			else if( (dir ^ (UP)) == 0) 
				imageSeq = 4;
			else
				imageSeq = 0;
			
			if( previousSeq != imageSeq ){
				console.log("Sequence changed : " + previousSeq + " -> " + imageSeq);
			}
			
			if( !moving ){
				imageIndex = 16;
			}
			
			playerX = playerX + Math.min(Math.abs(tc.vector.x) * 0.2, 5) * (tc.vector.x > 0 ? 1 : -1);
			playerY = playerY + Math.min(Math.abs(tc.vector.y) * 0.2, 5) * (tc.vector.y > 0 ? 1 : -1);
			
			var playerLocX = playerX > canvas.width - 135 ? canvas.width - 135 : playerX < 15 ? 15 : playerX;
			var playerLocY = playerY > canvas.height - 135 ? canvas.height - 135 : playerY < 15 ? 15 : playerY;
			
			//if( playerX < 0 ) playerX = 0;
			//if( playerX > canvas.width ) playerX = canvas.width;
			//if( playerY < 0 ) playerY = 0;
			//if( playerY > canvas.height ) playerY = canvas.height;
			
			backgroundX = playerX - playerLocX;
			backgroundY = playerY - playerLocY;
						
			var count = buildObjects( playerLocY, -1 );
			
			c.drawImage( p1, (imageIndex + (imageSeq*17)) * 100, 0, 100, 100, playerLocX, playerLocY, 100, 100 );
			
			buildObjects( playerLocY, 1 );
		};
		
		setInterval(mainLoop, 1000/35);
		
	</script>
</body>
</html>